<template>
  <div class="font-26 promote">
    <assets-head :title="$t('推荐')" />
    <div class="advise w-828 p-40 box-border flex flex-col items-start justify-center"
         style="min-height: 100px ; max-height: 160px">
      <span v-if="$i18n.locale==='CN'" class="font-600 font-48" style="color:#273549;">{{$t('邀请好友，一起赚币')}}</span>
      <span v-else class="font-900 w-500 font-48">{{$t('邀请好友，一起赚币')}}</span>
      <span class="w-500 mt-20 font-30 font-600" style="color:#273549">{{$t('马上充值即刻获取佣金')}}</span>
    </div>
    <div class="performance-title">
      <div class="performance-title-1 flex-col flex items-start"
        :class="{ 'performance-title-1-1': $i18n.locale !== 'CN' }">
        {{ $t('我的总推广') }}
        <div class="performance-text text-left">{{ promote_list.total && promote_list.total.children }}</div>
      </div>
      <div class="performance-title-2  flex-col flex items-center"
        :class="{ 'performance-title-1-1': $i18n.locale !== 'CN' }">
        {{ $t('总充值') }}
        <div class="performance-text2 text-left">{{ promote_list.recharge_sum ? (promote_list.recharge_sum * 1).toFixed(2)
          :
          '0.00' }}</div>
      </div>
      <div class="flex items-center w-160 justify-end colorMain" style="align-self: start">
        <div class="performance-title-3" @click="$router.push('/promote/rules')">{{ $t('规则') }}</div>

        <img class="performance-title-4" src="../../assets/image/promote/right.png" />
      </div>
    </div>
    <div class="numberOfPeople">
      <div class="numberOfPeople-text flex flex-col align-center">
        {{ $t('一代人数') }}
        <div class="mt-20 numberOfPeople-text4 text-center">{{ promote_list.total && promote_list.total.level_1
        }}</div>
      </div>
      <div class="numberOfPeople-text2 flex flex-col align-center">
        {{ $t('二代人数') }}
        <div class="mt-20 numberOfPeople-text5 flex-1 text-center ">{{ promote_list.total &&
          promote_list.total.level_2
        }}</div>
      </div>
      <!--      <div style="flex: 1;"></div>-->
      <div class="numberOfPeople-text3 flex flex-col align-center">
        {{ $t('三代人数') }}
        <div class="mt-20 numberOfPeople-text6  flex-1 text-center ">{{ promote_list.total &&
          promote_list.total.level_3
        }}</div>
      </div>
    </div>
    <div class="Recommend">
      <div class="Recommend-text btnMain text-white" @click="ShareQRCode_push">{{ $t('立即推广') }}</div>
    </div>
    <div class="segmentation-max"></div>
    <div class="MyRecommendation-title">{{ $t('我的推广') }}</div>
    <div style="width: 100%;">
      <van-tabs ref="tabs" v-model="active" sticky animated @change="onChange">
        <van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
          <div class="Recommendation-tab-title">
            <div class="Recommendation-tab-title1">{{ $t('用户名') }}</div>
            <div class="Recommendation-tab-title1">{{ $t('总人数') }}</div>
            <div class="Recommendation-tab-title1">{{ $t('总充值') }}</div>
          </div>
          <van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多了')" @load="onLoad"
            :loading-text="$t('加载中...')">
            <div v-for="(item, index) in promote_list_data" :key="index" class="Recommendation-tab textColor">
              <div class="Recommendation-tab1">{{ item.username }}</div>
              <div class="Recommendation-tab1">{{ item.reco_sum }}</div>
              <div class="Recommendation-tab1">{{ (item.recharge_sum * 1).toFixed(2) }}</div>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { Tab, Tabs } from 'vant';
import Axiospromote from '@/API/promote.js'
import { List } from 'vant';
import assetsHead from "@/components/assets-head";
export default {
  data() {
    return {
      active: '1',
      level: 1,
      page_no: 1,
      promote_list: [],
      promote_list_data: [],
      list: [],
      loading: false,
      finished: false,
      pageSize: 10,
      selectData: [
        { title: this.$t('一代'), type: '1' },
        { title: this.$t('二代'), type: '2' },
        { title: this.$t('三代'), type: '3' },
      ]
    }
  },
  components: {
    assetsHead,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
  },
  created() {
    // this.init()
  },
  methods: {
    init() {
      this.promote_data()
    },
    onLoad() {
      // 异步更新数据
      this.promote_data()
    },
    promote_data() {
      const t = this
      this.loading = true;
      Axiospromote.promote({ level: t.level, page_no: t.page_no }).then((res) => {
        t.promote_list = res.data
        this.promote_list_data = [...this.promote_list_data, ...res.data.list]
        this.loading = false
        if (res.data.list.length < this.pageSize) {
          this.finished = true
        } else {
          this.page_no++
        }
        this.$refs.tabs && this.$refs.tabs.resize();
      })
    },
    onClickLeft() {
      this.$router.push('/')
    },
    ShareQRCode_push() {
      this.$router.push('/ShareQRCode')
    },
    onChange(e) {
      this.promote_list_data = []
      this.finished = false
      this.page_no = 1
      this.level = e
      this.loading = true;
      if (this.loading) {
        this.promote_data()
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.promote {
  width: 100%;
  box-sizing: border-box;

  ::v-deep .van-tabs__nav {
    @include themify() {
      background: themed("cont_background");
    }
  }

  ::v-deep .van-tab--active {
    @include themify() {
      color: themed("active_line");
    }
  }
}



.advise {
  background: url("./invite-bg.png") no-repeat center center;
  background-size: 100% 100%;
}

.banner {
  width: 100%;
}

.performance-title {
  width: 100%;
  display: flex;
  padding-right: 35px;
  padding-left: 35px;
  margin-top: 40px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

.performance-title-1 {
  width: 200px;
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  color: #848E9C;

  &.performance-title-1-1 {
    width: 250px;
    font-size: 26px;
    text-align: center;
    margin-right: 10px;
  }
}

.performance-title-2 {
  flex: 1;
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  color: #848E9C;

  &.performance-title-1-1 {
    font-size: 26px;
    text-align: left;
  }
}

.performance-title-3 {
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
}

.performance-title-4 {
  width: 35px;
}

.performance {
  width: 100%;
  display: flex;
  padding-right: 35px;
  padding-left: 35px;
  margin-top: 25px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

.performance-text {
  width: 250px;
  font-style: normal;
  font-weight: 600;
  font-size: 66px;
  color: #2EBD85;
  margin-top: 22px;
}

.performance-text2 {
  flex: 1;
  font-style: normal;
  font-weight: 600;
  font-size: 66px;
  color: #2EBD85;
  margin-top: 22px;
}

.numberOfPeople {
  width: 100%;
  display: flex;
  padding-right: 35px;
  padding-left: 35px;
  margin-top: 45px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}

.numberOfPeople-text,
.numberOfPeople-text2,
.numberOfPeople-text3 {
  font-style: normal;
  font-weight: 400;
  text-align: center;
  font-size: 26px;
  color: #848E9C;
}

.numberOfPeople2 {
  width: 100%;
  display: flex;
  padding-right: 35px;
  padding-left: 35px;
  margin-top: 20px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

.numberOfPeople-text4,
.numberOfPeople-text5,
.numberOfPeople-text6 {
  font-style: normal;
  font-weight: 700;
  text-align: center;
  font-size: 40px;

  @include themify() {
    color: themed("text_color");
  }
}


.Recommend {
  padding-right: 35px;
  padding-left: 35px;
  margin-top: 45px;
  height: 100px;
  box-sizing: border-box;
}

.Recommend-text {
  //background: #FCD436;
  border-radius: 4px;
  line-height: 100px;
  font-weight: 400;
  font-size: 32px;
  text-align: center;
  border-radius: 8px;
  //color: #333333;
}

.segmentation-max {
  margin-top: 45px;
  width: 100%;
  height: 20px;

  @include themify() {
    background: themed("bg_dark");
  }
}

.MyRecommendation-title {
  padding: 32px 35px 38px;
  font-style: normal;
  font-weight: 400;
  font-size: 32px;
  text-align: left;

  @include themify() {
    color: themed("text_color");
  }
}

.Recommendation-tab-title {
  margin-left: 35px;
  margin-right: 35px;
  height: 85px;

  @include themify() {
    background: themed("tab_background");
  }

  display: flex;
  margin-top: 35px;
}

.Recommendation-tab-title1 {
  flex: 1;
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  line-height: 85px;
  text-align: center;
  color: #868D9A;
}

.Recommendation-tab {
  margin-left: 35px;
  margin-right: 35px;
  height: 85px;
  display: flex;
  margin-top: 35px;
}

.Recommendation-tab1 {
  flex: 1;
  font-style: normal;
  font-weight: 400;
  font-size: 34px;
  line-height: 85px;
  text-align: center;
}
</style>
